import React from 'react'
import { TrendingDown, TrendingUp } from 'lucide-react'
import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'
import { BattleValueExt2 } from '@/types/sun'

interface SmoothLineChartProps {
  data: BattleValueExt2[]
  // 默认值 Damage
  damage?: string
  receive?: string
  tag?: string
  title: string
  height?: string
}

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@/components/ui/card'
import {
  ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent
} from '@/components/ui/chart'

const SmoothData: React.FC<SmoothLineChartProps> = ({
  data,
  title,
  receive = '承受伤害',
  damage = '输出伤害'
  // height = '500px'
}) => {
  const chartData = data.map((item) => ({
    name: item.name,
    value1: item.damage,
    value2: item.receive
  }))

  const chartConfig = {
    value1: {
      label: `${damage}:`,
      color: 'hsl(var(--chart-1))',
      icon: TrendingDown
    },
    value2: {
      label: `${receive}:`,
      color: 'hsl(var(--chart-2))',
      icon: TrendingUp
    }
  } satisfies ChartConfig

  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>
          该时间点生产的输出伤害和承受伤害的次数
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig}>
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{
              left: 12,
              right: 12
            }}
          >
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="name"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              tickFormatter={(value) => value}
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Area
              dataKey="value1"
              type="natural"
              fill="var(--color-value1)"
              fillOpacity={0.4}
              stroke="var(--color-value1)"
              stackId="a"
            />
            <Area
              dataKey="value2"
              type="natural"
              fill="var(--color-value2)"
              fillOpacity={0.4}
              stroke="var(--color-value2)"
              stackId="a"
            />
            <ChartLegend content={<ChartLegendContent />} />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

export default SmoothData
